<template>
	<a-dropdown
		v-model="show"
		:trigger="['click']"
		placement="bottomLeft"
		overlayClassName="box-dropdown"
	>
		<a-button class="width">
			<i class="word">{{ item ? item.functionAlias : '等于1' }}</i>
			<a-icon type="caret-down" class="iconfont" />
		</a-button>
		>
		<template slot="overlay" @click="handleVisible">
			<div class="box-list">
				<div class="box-menu">
					<a-menu slot="overlay" v-if="listData.length > 0" @click="changeAttrFunction($event)">
						<a-menu-item
							v-for="obj in listData"
							:key="obj.functionCode"
							:value="obj.functionCode"
							:title="obj.functionAlias"
						>
							{{ obj.functionAlias }}
							<a-icon type="check" class="check" />
						</a-menu-item>
					</a-menu>
				</div>
			</div>
		</template>
	</a-dropdown>
</template>
<script lang="ts">
import { Component, Prop, Emit, Watch, Vue } from 'vue-property-decorator'
import request from '@/utils/request'
import { FieldsType } from '../type'

@Component({
	name: 'ConditionFunction',
	components: {}
})
export default class extends Vue {
	@Prop() dataType!: string
	@Prop() pkey!: number // 条件的key
	@Prop() subkey!: number // 子条件的key
	@Prop() itemKey!: number // 指标的key
	@Prop() level!: string
	@Prop() item!: FieldsType
	private show = false
	private listData: any = []

	mounted(): void {
		this.getConditionFunction()
	}

	private handleVisible() {
		this.show = true
	}

	@Emit('changeAttrFunction')
	private changeAttrFunction(e: any) {
		return {
			e,
			level: this.level,
			pkey: this.pkey,
			subkey: this.subkey,
			itemKey: this.itemKey
		}
	}
	//获取条件的方法
	@Watch('dataType')
	private getConditionFunction() {
		request('/reportservice/event/function', {
			method: 'GET',
			data: {
				dataType: this.dataType
			}
		}).then(({ data }) => {
			this.listData = data
		})
	}
}
</script>
<style lang="scss" scoped>
.box-list {
	width: 200px;
	height: 260px;
	box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.14);
	box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.12);
	box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2);
	background: #fff;
	overflow-y: scroll;

	.box-menu {
		height: 240px;
		overflow-y: scroll;
		margin-top: 10px;
		.ant-menu {
			.ant-menu-item {
				.check {
					display: none;
				}
				&:hover {
					background: rgba(45, 140, 240, 0.06);
				}
				&.ant-menu-item-selected {
					.check {
						display: inline-block;
						position: absolute;
						top: 12px;
						right: 10px;
					}
				}
			}
		}
	}
}
.width {
	width: 70px;
}
</style>
